<template>
  <div style="display: flex; justify-content: space-between">
    <div
      class="camera_outer"
      style="width: 30%; border-radius: 10px; background: '#587ab3'"
    >
      <div
        class="img_bg_camera"
        style="width: 100%; height: 100%; background: '#587ab3'"
      >
        <img
          :src="imgSrc"
          alt
          class="tx_img"
          style="width: 100%; height: 700px"
        />
        <p style="width: 80px; color: white">用户名:{{ username }}</p>
        <div style="width: 100%; display: flex; justify-content: space-between">
          <el-button @click="startFace()" type="primary">扫脸完成登录</el-button>
          <!-- <el-button @click="getCompetence()" type="primary"
            >登录进行验证当前工序人员</el-button
          > -->
          <el-button @click="stopNavigator()" type="warning"
            >退出当前人员</el-button
          >
        </div>
      </div>
    </div>
    <div
      class="home_table"
      style="
        height: calc(100vh - 84px);
        flex: 1;
        padding-left: 10px;
        width: 50%;
        background: '#445e89e6';
      "
    >
      <el-table
        :data="tableData"
        height="100%"
        border
        :header-cell-style="{
          textAlign: 'center',
          background: '#445e89e6',
          color: '#ffffff',
        }"
        style="width: 100%; border-radius: 10px; border: 0"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="workstation"
          show-overflow-tooltip
          label="工序"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="mainProductName"
          show-overflow-tooltip
          label="主齿轮编号"
          sortable=""
        ></el-table-column>
        <el-table-column
          prop="subProductName"
          show-overflow-tooltip
          label="被齿轮编号"
          sortable=""
        ></el-table-column>
        <el-table-column
          prop="personName"
          show-overflow-tooltip
          label="人员"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          show-overflow-tooltip
          label="时间"
          width="160"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { Query, Recognition, Login, Logout } from "@/api/home";
export default {
  inject: ["reload"],
  data() {
    return {
      videoWidth: 500,
      videoHeight: 300,
      video: true,
      photograph: false,
      imgSrc: "",
      thisCancas: null,
      thisContext: null,
      thisVideo: null,
      openVideo: false,
      username: "",
      // 渲染表格数据
      tableData: [],
      form: [
        // {
        //   equipmentCode: "2",
        //   equipmentModel: "1",
        //   equipmentName: "扫码枪",
        //   equipmentStatus: "在 线",
        //   equipmentType: "1",
        //   personnelCode: "2",
        //   personnelName: "2",
        //   postName: "2",
        //   postStatus: "在 线",
        //   status: "在 线",
        //   time: "2024-05-17 00:00:00",
        //   updateBy: "1",
        //   updateTime: "2024-05-09 18:07:18",
        //   user: "1",
        //   workstation: "2",
        // },
      ],
    };
  },
  created() {
    // this.query();
    this.imgSrc = localStorage.getItem("imgSrc");
    this.username = localStorage.getItem("username");
  },
  mounted(){
    this.query();
  },
  methods: {
    // 渲染数据
    query() {
      var data = {};
      Query(data)
        .then((res) => {
          console.log("记录管理查询列表成功", res);
          this.tableData = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //开始识别人脸
    startFace() {
      Recognition().then((res) => {
        console.log("开始识别人脸", res);
        if (res.data.code == 200) {
          // this.$message.success(res.data.msg);
          // Login().then((res) => {
          //   console.log("登录进行验证是否当前工序人员", res);
          //   if (res.data.code == 200) {
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem("imgSrc", res.data.data.imagedata.imageBase64);
          localStorage.setItem("username", res.data.data.imagedata.name);
          this.username = res.data.data.imagedata.name;
          this.imgSrc = res.data.data.imagedata.imageBase64;
          this.$message.success(res.data.msg);
          // this.imgSrc='data:image/png;base64,' + res.data.data.imageBase64;
          // } else {
          //   this.$message.error(res.data.msg);
          // }
          // });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //登录进行验证是否当前工序人员
    // getCompetence() {
    //   Login().then((res) => {
    //     console.log("登录进行验证是否当前工序人员", res);
    //     if (res.data.code == 200) {
    //       localStorage.setItem("token", res.data.data.token);
    //       localStorage.setItem("imgSrc", res.data.data.imagedata.imageBase64);
    //       localStorage.setItem("username", res.data.data.imagedata.name);
    //       this.username = res.data.data.imagedata.name;
    //       this.imgSrc = res.data.data.imagedata.imageBase64;
    //       this.$message.success(res.data.msg);
    //       // this.imgSrc='data:image/png;base64,' + res.data.data.imageBase64;
    //     } else {
    //       this.$message.error(res.data.msg);
    //     }
    //   });
    // },
    //退出清除当前工序人员
    stopNavigator() {
      var data = localStorage.getItem("token");
      Logout(data).then((res) => {
        console.log("退出清除当前工序人员", res);
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          window.localStorage.clear();
          this.imgSrc = "";
          this.reload();
        } else {
          window.localStorage.clear();
          this.$message.error(res.data.msg);
          this.reload();
        }
      });
    },
  },
};
</script>

<style lang="scss">
.camera_outer {
  background-color: #445e89e6;
  padding: 10px;
  .button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
  }
}
.rowStyle {
  color: rgb(28, 235, 211) !important;
  background: rgb(36 52 93) !important;
}
.el-table__body-wrapper {
  background-color: #445e89e6;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border: 1px solid #587ab3;
}

.el-table::before {
  height: 0px;
}
/* 悬停划过高亮，鼠标经过，当前行的颜色 */
.el-table__body tr:hover > td {
  background-color: rgb(36 52 93) !important;
  color: rgb(28, 235, 211);
}
.el-table--border,
.el-table--group {
  border: 0px solid #ebeef5;
}
.home_table .el-table__body tr:nth-child(even) {
  background-color: #3c5276;
  color: white;
}
.home_table .el-table__body tr:nth-child(odd) {
  background-color: #445e89;
  color: white;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: "";
  position: absolute;
  /* background-color: #EBEEF5; */
  background-color: #445e89;
  z-index: 1;
}
</style>
